<template>
  <div class="shop-push-product">
    <div class="title">文创产品</div>
    <el-form ref="form" :model="product" class="product-editForm" label-position="left">
      <el-form-item label="产品名称" class="productName" prop="productName">
        <el-input v-model="product.productName" placeholder="请输入产品名称"/>
      </el-form-item>
      <!-- 上传封面 -->
      <el-form-item label="封面" prop="cover" class="cover">
        <el-upload
            action="#"
            :file-list="product.coverList"
            :limit="1"
            :multiple="true"
            :show-file-list="false"
            :before-upload="beforeUploadCover"
            :on-success="handleAvatarSuccess"
            :http-request="uploadCover">
          <el-button class="upload-btn">
            <span v-if="!product.cover">上传封面</span>
            <span v-else>更换封面</span>
          </el-button>
        </el-upload>
        <el-image class="cover-img" v-if="product.cover" :src="getDownloadUrl(product.cover)" />
      </el-form-item>
      <el-form-item label="是否预售" prop="isPre">
        <el-switch v-model="isPre"></el-switch>
      </el-form-item>
      <div v-if="isPre">
        <el-form-item label="预售价格" prop="preSalePrice">
          <el-input-number
            :controls="false"
            v-model="product.preSalePrice"
            :min="0"
            step="0.01"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="预售时间" prop="preSaleTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="product.preSaleTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="产品链接" class="description" prop="link">
          <el-dialog title="产品链接"
                     v-model="visible"
                     v-model:visible="visible"
                     width="400px"
                     top="200px"
                     :close-on-click-modal="false"
                     :destroy-on-close="true"
                     :before-close="handleClose"
                     >
            <el-input placeholder="请添加链接" v-model="product.linKOption.link"></el-input>
            <el-input placeholder="要显示的文本" v-model="product.linKOption.text"></el-input>
            <el-input placeholder="标题" v-model="product.linKOption.title"></el-input>
            <span>
                <el-button type="primary" @click="okLink">确 定</el-button>
            </span>
          </el-dialog>
          <el-button class="upload-btn" @click="addLink" v-if="!product.link">
            添加链接
          </el-button>
          <span v-html="product.link"></span>
        </el-form-item>
      </div>
      <el-form-item label="预发布时间" prop="releaseTime">
        <el-col :span="11">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="product.releaseTime" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="产品描述" class="description" prop="description">
        <el-input type="textarea" v-model="product.description"/>
      </el-form-item>
      <el-form-item label="附件" prop="attachList">
        <el-upload class="attachBtn" action="#" :file-list="product.attachList"
                   :limit="10"
                   :multiple="true"
                   :show-file-list="false"
                   :before-upload="beforeUploadAttachmentList"
                   :on-success="handleAvatarSuccess"
                   :http-request="uploadAttach" >
          <el-button class="upload-btn">上传附件</el-button>
        </el-upload>
        <div v-for="(item, index) in product.attachmentList" :key="item.attachNo" class="attachList">
          <span>{{item.attachName}}</span>
          <el-button @click="viewAttach">预览</el-button>
          <el-button v-if="isEdit" @click="downloadAttach(item.attachNo)">下载</el-button>
          <el-button @click="deleteAttach(index)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item label="产品备注" class="remark" prop="remark">
        <el-input type="textarea" v-model="product.remark"/>
      </el-form-item>
      <el-form-item prop="btn">
        <el-button class="push-btn" @click="pushProduct">发布产品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import FileUtil from '@/utils/common/attachment'
import { regexImage, regexImageOrVideo } from '@/script/util'
import CommonUtil from '@/utils/common/util'
import { addProduct } from '@/services/index/shop/shop'
export default {
  data () {
    return {
      // 是编辑页？
      isEdit: false,
      visible: false,
      isPre: false,
      product: {
        productName: '',
        link: '',
        linKOption: {
          link: '',
          text: '',
          title: ''
        },
        cover: '',
        coverList: [],
        description: '',
        remark: '',
        attachList: [],
        attachmentList: [],
        preSaleTime: '',
        preSalePrice: 0,
        releaseTime: ''
      }
    }
  },
  methods: {
    beforeUploadCover () {
      if (this.product.cover.length > 1) {
        this.$message.error('您不能上传超过一个文件')
        return false
      }
      if (!regexImage.test(this.product.coverList[0].raw.type)) {
        this.$message.error('暂不支持此类文件')
        return false
      }
    },
    beforeUploadAttachmentList () {
      if (this.product.attachList.length > 10) {
        this.$message.error('最多上传10个附件')
        return false
      }
      if (!regexImageOrVideo.test(this.product.attachList[0].raw.type)) {
        this.$message.error('暂不支持此类文件')
        return false
      }
    },
    handleAvatarSuccess (res, file) {
      this.profilePhotoUrl = URL.createObjectURL(file.raw)
    },
    uploadCover () {
      // 调用组件完成上传，并获取返回值
      const execRes = FileUtil.uploadFile(this.product.coverList, 'shopProduct', 'NO')
      // 根据上传项执行不同的回显操作
      execRes.then((res) => {
        this.product.cover = res.data[0].attachNo
      })
    },
    uploadAttach () {
      // 调用组件完成上传，并获取返回值
      const execRes = FileUtil.uploadFile(this.product.attachList, 'shopProduct', 'NO')
      this.product.attachList = []
      // 根据上传项执行不同的回显操作
      execRes.then((res) => {
        res.data.forEach((val) => {
          this.product.attachmentList.push(val)
        })
      })
    },
    addLink () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    okLink () {
      this.product.link = CommonUtil.buildOutSideCfmLink(this.product.linKOption.title, this.product.linKOption.link, this.product.linKOption.text)
      this.handleClose()
    },
    viewAttach () {

    },
    downloadAttach () {

    },
    deleteAttach (index) {
      this.product.attachmentList.splice(index, 1)
    },
    pushProduct () {
      const attachListForm = []
      this.product.attachmentList.forEach((val) => {
        const item = {
          attachNo: val.attachNo,
          type: val.type.split('/')[0]
        }
        attachListForm.push(item)
      })
      const formData = {
        productName: this.product.productName,
        productType: 'culture',
        link: this.product.link,
        cover: this.product.cover,
        description: this.product.description,
        remark: this.product.remark,
        attachList: attachListForm,
        preSaleTime: this.product.preSaleTime,
        preSalePrice: this.product.preSalePrice,
        releaseTime: this.product.releaseTime
      }
      const data = JSON.stringify(formData)
      addProduct(data).then((res) => {
        if (res.code !== 10000) {
          this.$message.error('发布产品失败')
          return
        }
        this.$router.push('/portal/shop/home')
      })
    },
    getDownloadUrl (url) {
      return FileUtil.getDownloadUrl(url)
    }
  }
}
</script>

<style scoped lang="less">
@import "pushProduct.less";
</style>
